<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="pos pd-30 " v-if="Object.keys(orderSettlementInfo).length > 0">
			<view class="goods pd-20"
				@click="goPage('/subpackage/immigration/immigration?id=' + orderSettlementInfo.product_data.id)">
				<view class="flex">
					<image class="img" :src="orderSettlementInfo.product_data.cover" mode="aspectFill"></image>
					<view class="ml-12">
						<view class="ft1 ft-lue">{{ orderSettlementInfo.product_data.name }}</view>
						<view class="ft c-99 mt-10">
							<text v-for="(item, index) in orderSettlementInfo.product_data.tags" :key="index">
								{{ item.name + (index < orderSettlementInfo.product_data.tags.length - 1 ? '| ' : '')
								}}</text>
						</view>
						<view class="mt-10">
							<text class="ft c-33 fw-800">{{ orderSettlementInfo.price_symbol }}</text><text
								class="ft-num ft-52 c-33">{{ orderSettlementInfo.price_show }}</text><text
								class="ft c-33 fw-800">
								{{ "元/办理花费" }}</text>
						</view>
					</view>
				</view>
				<view class="mt-20 more flex-bwt" @click.stop="showFuwu = true">
					<text class="ft ml-20">{{ orderSettlementInfo?.service_info?.name }}</text>
					<image class="mr-20" style="width: 20rpx;height: 34rpx;"
						src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="rate mt-20 pd-20" v-if="orderSettlementInfo.relate_data">
				<view class="ft c-99">{{ "相关货币汇率：" + orderSettlementInfo.relate_data.name }}</view>
				<view class="ft c-33 mt-10 fw-800">{{ orderSettlementInfo.relate_data.txt }}</view>
				<view class="more mt-20 flex-center" @click="goSource(orderSettlementInfo.relate_data.code)">
					<view class="ft"> 数据来源</view>
					<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="amount mt-20 pd-20">
				<view class="flex-bwt">
					<text class="ft1">商品金额</text>
					<view class="flex">
						<text class="ft c-99">清单说明</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"></image>
					</view>
				</view>
				<view class="mt-20 ft c-99">已自动帮您领券</view>
				<view class="mt-20 card pd-20">
					<view class="flex-bwt">
						<text class="ft c-99"> {{ "商品金额" }}</text>
						<text class="ft">￥{{ orderSettlementInfo.total_old_price_exchange_show }}</text>
					</view>
					<view class="flex-bwt mt-20" @click="goCoupons"
						v-if="orderSettlementInfo.total_coupon_price_exchange_show">
						<text class="ft c-99"> {{ "优惠券" }}</text>
						<view class="flex"><text class="ft c-red">-￥{{
							orderSettlementInfo.total_coupon_price_exchange_show }}</text>
							<image class="w-20h-34 ml-10"
								src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
							</image>
						</view>
					</view>
					<view class="flex-bwt mt-20" v-if="orderSettlementInfo.vip_reduce_price_exchange_show">
						<text class="ft c-99"> {{ "会员优惠项" }}</text>
						<text class="ft c-red">-￥{{ orderSettlementInfo.vip_reduce_price_exchange_show }}
							<text class="ft c-33">({{ orderSettlementInfo.vip_reduce_txt }})</text></text>
					</view>
					<view class="flex-bwt mt-20" v-if="orderSettlementInfo.group_reduce_price_exchange_show">
						<text class="ft c-99"> {{ "拼团优惠" }}</text>
						<text class="ft c-red">-￥{{ orderSettlementInfo.group_reduce_price_exchange_show }} <text
								class="ft c-33">{{ "(立减)" }}</text></text>
					</view>
					<view class="mt-20 line"></view>
					<view class="mt-20 money"><text class="ft c-33 fw-800">合计￥</text>
						<text class="ft-num fw-800">{{ orderSettlementInfo.total_price_exchange_show }}</text><text
							class="ft c-33 fw-800">元</text>
					</view>
				</view>
				<view class="more flex-center" @click="showOffers = true">
					<view class="ft">清单明细</view>
					<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="contract mt-20 pd-20" v-if="orderSettlementInfo.contract_data.length > 0">
				<view class="flex-bwt">
					<text class="ft1">关联合同</text>
					<view class="flex">
						<text class="ft c-99">合同说明</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"></image>
					</view>
				</view>
				<view class="office mt-20 pd-20 flex-bwt" v-for="item in orderSettlementInfo.contract_data"
					:key="item.id">
					<view class="flex">
						<image v-if="item.suffix === ' pdf'" class="w-66h-76"
							src="https://cdn.oss.bon-top.cn/static_bc/images/PDF.png">
						</image>
						<image v-else-if="item.suffix === 'xlsx' || item.suffix === 'xls'" class="w-66h-76"
							src="https://cdn.oss.bon-top.cn/static_bc/images/X.png"></image>
						<image v-else-if="item.suffix === 'docx' || item.suffix === 'doc'" class="w-66h-76"
							src="https://cdn.oss.bon-top.cn/static_bc/images/W.png"></image>
						<image class="w-66h-76" src="https://cdn.oss.bon-top.cn/static_bc/images/PDF.png" v-else>
						</image>
						<view class="ft ml-8">
							<view class="ft1">{{ item.origin_name }}</view>
							<view class="ft c-99 mt-10">{{ item.created_at + " | " + item.size_info }}</view>
						</view>
					</view>
					<!-- <view class="ft c-99" @click="seeOffice(item.url, item.suffix)">查看</view> -->
					<view class="ft c-99" @click="openContract(item)">查看</view>
				</view>
				<view class="mt-40 xiey">
					<image class="mr-10 fs0" style="width: 30rpx;height: 30rpx;"
						src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" @click="isCheck = !isCheck"
						v-if="isCheck"></image>
					<image class="mr-10 fs0" style="width: 30rpx;height: 30rpx;"
						src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png" @click="isCheck = !isCheck"
						v-if="!isCheck"></image>
					<text class="ft ft-22">
						我同意合同条款<template v-for="(item, index) in orderSettlementInfo.contract_data" :key="item.id">
							<text class="c-bbq">《{{ item.origin_name }}》</text>
							<text v-if="index < orderSettlementInfo.contract_data.length - 1">、</text>
						</template>
						<!-- <text v-for="(item, index) in orderSettlementInfo.contract_data" :key="item.id">
							<text class="c-bbq">《{{ item.origin_name }}》</text>
							<text v-if="index < orderSettlementInfo.contract_data.length - 1">、
							</text>
						</text> -->
					</text>
				</view>
				<view class="line mt-20"></view>
				<view class="ft mt-20 c-99 flex-center">{{
					"提交订单即同意合同条款"
				}}</view>
			</view>
			<view class="combo mt-20 pd-20">
				<view class="flex-bwt">
					<text class="ft1">支付期与款项选择</text>
					<view class="flex">
						<text class="ft c-99">支付款项说明</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png">
						</image>
					</view>
				</view>
				<view class="comboItem mt-20 pd-20" v-for="(item, index) in orderSettlementInfo.node_list"
					:key="item.index">
					<view class="flex-bwt">
						<view class="flex" @click="checkNode(item)">
							<image class="mr-10" style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="item.is_check == 1">
							</image>
							<image class="mr-10" style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png"
								v-if="item.is_check == 0">
							</image>
							<view class="ft c-33 fw-800">{{ item.name }}</view>
						</view>
						<view class="flex">
							<text class="ft c-33 fw-800">{{ "￥" + item.price_show }}</text>
							<image v-if="openNodeIndexArr.includes(index)" @click="openNode(index)" class="wh-24 ml-8"
								src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png">
							</image>
							<image v-else @click="openNode(index)" class="wh-24 ml-8"
								src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
						</view>
					</view>
					<view class="ml-40 ft c-99">
						{{ "付款节点:" + item.node + " | 付款时间:" + item.pay_time }}
					</view>
					<view v-if="openNodeIndexArr.includes(index)">
						<view class="line1 ml-40 mt-20"></view>
						<view class="flex-bwt mt-10 w-100" v-for="(v, k) in item.list" :key="k">
							<view class="ft ml-40 c-99">{{ v.name }}</view>
							<view class="flex">
								<view class="ft c-99">{{ "￥" + v.old_price_show + "优惠后 |" }}</view>
								<view class="ft c-33 fw-800">{{ " ￥" + v.new_price_show }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fee mt-20 pd-20">
				<view class="flex-bwt">
					<text class="ft1">支付金额</text>
				</view>
				<view class="center mt-20 pd-20">
					<view class="flex-bwt">
						<view style="width: 180rpx" class="ft c-99"> {{ "支付款项" }}</view>
						<text class="ft">{{ orderSettlementInfo.pay_node_txt }}</text>
					</view>
					<view class="flex-bwt mt-20">
						<view style="width: 180rpx" class="ft c-99"> {{ "支付金额" }}</view>
						<text class="ft">{{ "￥" + orderSettlementInfo.old_pay_price_show }}</text>
					</view>
					<view class="flex-bwt mt-20" @click="goDeduction" v-if="orderSettlementInfo.can_use_integral > 0">
						<view style="width: 180rpx" class="ft c-99"> {{ "积分抵扣" }}</view>
						<view class="flex">
							<view class="ft c-red" v-if="orderSettlementInfo.integral_reduce_price_exchange_show">
								{{ "-￥" + orderSettlementInfo.integral_reduce_price_exchange_show }}
							</view>
							<view class="you ft flex-center" v-else>{{ orderSettlementInfo.can_use_integral + "积分可用"
							}}</view>
							<image class="img ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
							</image>
						</view>
					</view>
					<view class="flex-bwt mt-20" @click="goReduction"
						v-if="orderSettlementInfo?.share_reduce_list?.length > 0">
						<view style="width: 180rpx" class="flex ft c-99">
							{{ "分享减免" }}
							<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png">
							</image>
						</view>
						<view class="flex">
							<text class="ft c-red">{{ "-￥" + orderSettlementInfo.share_reduce_price_exchange_show
							}}</text>
							<image class="img ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
							</image>
						</view>
					</view>
					<view class="line mt-20"></view>
					<view class="mt-20 w-100 " style="text-align: right;"> <text class="ft ft-22 fw-800 c-33">{{
						'合计金额￥' }}</text> <text class="ft-num ">{{ orderSettlementInfo.pay_price_show
							}}</text><text class="ft ft-22 fw-800 c-33">{{ '元' }}</text></view>
				</view>
			</view>
			<view class="note mt-20 pd-20">
				<view class="ft1">{{ "备注" }}</view>
				<view class="mt-20 center ft pd-20" :class="{ 'flex-center': !remark }" @click="goNote">
					<view class="ft" v-if="remark">{{ remark }}</view>
					<view class="btn flex-center ft c-33" v-if="!remark">
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/note.png"></image>
						<text class="mr-8">请填写您的备注</text>
					</view>
				</view>
			</view>
			<view class="null" style="height: 240rpx;"></view>

		</view>


		<view style="height: 132rpx;" v-if="orderSettlementInfo.is_can_group_buy == 1"></view>
		<view class="opt">
			<template v-if="orderSettlementInfo.is_can_group_buy == 1">
				<view class="group-box">
					<view class="ptuan flex-bwt" v-if="!orderSettlementInfo.group_data">
						<view class="ft c-33 fw-800">{{ '2人成团返券￥' + orderSettlementInfo.group_buy_data.reduce + '元' }}
						</view>
						<view class="change flex-center" @click="changePdd(1)" v-if="!is_group_buy">
							<text class="ft c-33">{{ '切换发起拼团' }}</text>
							<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/change.png">
							</image>
						</view>
						<view class="change flex-center" @click="changePdd('')" v-if="is_group_buy == 1">
							<text class="ft c-33">{{ '切换不拼团' }}</text>
							<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/change.png">
							</image>
						</view>
					</view>
					<view class="flex-bwt mt-20" v-if="!orderSettlementInfo.group_data && is_group_buy == 1">
						<view class="flex">
							<view class="txt" style="font-size: 22rpx;color: #999999;margin-right: 4rpx;">拼单说明
							</view>
							<image class="wh-22" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png">
							</image>
						</view>
						<view class="flex-end">
							<view class="mr-10" style="font-weight: 800;font-size: 24rpx;color: #333333;">邀请1人成团
							</view>
							<image class="wh-40 bd-r50c" :src="uInfo.avatar" mode="aspectFill" v-if="uInfo"></image>
							<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/group_add.png"
								mode="widthFix" v-if="!uInfo"></image>
							<image class="ml-10 mr-10" style="width: 16rpx;height: 16rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/add.png"></image>
							<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/group_add.png"
								mode="widthFix"></image>
						</view>
					</view>
					<template v-if="orderSettlementInfo.group_data">
						<template v-if="is_group_buy == 1">
							<view class="ptuan flex-bwt">
								<view class="flex">
									<view class="ft c-33 fw-800">
										{{
											'2人成团' + (orderSettlementInfo.group_data.get_user_id > 0 ? '立减' : '返券') + '￥' +
											orderSettlementInfo.group_buy_data.reduce + '元'
										}}
									</view>
									<image class="wh-22" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"
										style="margin-left: 4rpx;"></image>
								</view>
								<view class="change flex-center" @click="changePdd('', 1)">
									<text class="ft c-33">{{ '切换不拼团' }}</text>
									<image class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/change.png">
									</image>
								</view>
							</view>
							<view class="flex-bwt mt-20">
								<view class="flex">
									<view class="mr-10" style="font-weight: 800;font-size: 24rpx;color: #333333;">
										剩余拼团时间
									</view>
									<comTimeOut class="ml-10" :size="20"
										:time="orderSettlementInfo.group_buy_data?.end_time"> </comTimeOut>

									<!-- <template v-if="orderSettlementInfo.group_buy_data.d > 0">
										<view class="time">{{ orderSettlementInfo.group_buy_data.d }}天</view>
										<view class="time-i">:</view>
									</template>
	<view class="time">{{ orderSettlementInfo.group_buy_data.h }}</view>
	<view class="time-i">:</view>
	<view class="time">{{ orderSettlementInfo.group_buy_data.m }}</view>
	<view class="time-i">:</view>
	<view class="time">{{ orderSettlementInfo.group_buy_data.s }}</view> -->
								</view>
								<view class="flex-end">
									<view class="mr-10" style="font-weight: 800;font-size: 24rpx;color: #333333;">
										待您成团
									</view>
									<image class="wh-40 bd-r50c" :src="orderSettlementInfo.group_data.user_info.avatar"
										mode="aspectFill">
									</image>
									<image class="ml-10 mr-10" style="width: 16rpx;height: 16rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/add.png"></image>
									<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/group_add.png"
										mode="widthFix"></image>
								</view>
							</view>
						</template>
						<template v-if="is_group_buy == ''">
							<view class="ptuan flex-bwt">
								<view class="ft c-33 fw-800">{{
									'2人成团' + (orderSettlementInfo.group_data.get_user_id > 0 ? '立减' : '返券') + '￥' +
									orderSettlementInfo.group_buy_data.reduce + '元'
								}}
								</view>
								<view class="flex-end">
									<view class="mr-10" style="font-weight: 800;font-size: 24rpx;color: #333333;">
										好友正邀请您成团
									</view>
									<image class="wh-40 bd-r50c" :src="uInfo.avatar" mode="aspectFill" v-if="uInfo">
									</image>
									<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/group_add.png"
										mode="widthFix" v-if="!uInfo"></image>
									<image class="ml-10 mr-10" style="width: 16rpx;height: 16rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/add.png"></image>
									<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/group_add.png"
										mode="widthFix"></image>
								</view>
							</view>
						</template>
					</template>
				</view>
			</template>
			<view class="submit flex pd-10">
				<view class="kind mt-20 ml-20" @click="openPay">
					<view class="kind-box">
						<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/kind.png"></image>
						<view class="num flex-center" v-if="payNodeList.length > 0">{{ payNodeList.length }}</view>
					</view>
					<text class="ft c-33 fw-800">支付项</text>
				</view>
				<view class="jiaqia ml-12">
					<view class="ft-num ft-44 c-red" style="white-space: nowrap;"><text
							class="ft ft-22 c-red">￥</text>{{
								orderSettlementInfo.pay_price_show }}<text class="ft ft-22 c-red">元</text></view>
					<view class="ft c-33 fw-800"><text
							v-if="orderSettlementInfo.total_reduce_price_exchange_show">优惠减￥{{
								orderSettlementInfo.total_reduce_price_exchange_show }}元</text>
					</view>
				</view>
				<view class="minxi ml-12 mt-40 flex-center" @click="openCoupon">
					<text class="ft c-99">{{ "优惠明细" }}</text>
					<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
					</image>
				</view>
				<view style="flex: 1;"></view>
				<view class="tijiao flex-center c-dbf ml-8 mt-20 ft" @click="subOrder">
					{{ (is_group_buy == 1 ? '拼团' : '') + '提交订单' }}
				</view>
			</view>
		</view>
	</view>
	<up-popup :show="showFuwu" mode="bottom" round="14" @open="openF">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeF"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">服务</view>
			<view class="ft mt-12 c-99">{{ orderSettlementInfo?.service_info?.name }}，适用说明</view>
			<scroll-view scroll-y="true" class="scroll-Y-service">
				<view class="card_6 flex mt-20 pd-20">
					<view class="card">
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 服务</view>
							<view class="right pd-20 ft">{{ orderSettlementInfo?.service_info?.name }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 期限</view>
							<view class="right pd-20 ft">{{ orderSettlementInfo?.service_info?.term }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 条件</view>
							<view class="right pd-20 ft">{{ orderSettlementInfo?.service_info?.requirement }}
							</view>
						</view>

					</view>
				</view>
				<view class="card_7 mt-20 pd-20">
					<view class="ft1">其他</view>
					<view class="ft c-99 mt-10">{{ orderSettlementInfo?.service_info?.des }}</view>
				</view>
			</scroll-view>
			<view class="bottomBtn flex-center">
				<view class="btn c-dbf flex-center ft" @click="showFuwu = false">知道了</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showOffers" mode="bottom" round="14" @open="openO">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeO"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">汇率明细</view>
			<view class="ft c-99 mt-10 ft-lue" style="width:670rpx;">{{
				orderSettlementInfo.today_currency_str
			}}</view>
			<view class="mt-20 flex">
				<view class="popuItem ft flex-center mr-20" v-for="(item, index) in checkList" :key="item.id"
					:class="{ active: tabSec === item.id }" @click="selctCheck(item.id)">
					{{ item.title }}
				</view>
			</view>

			<view class="content mt-20">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 1">
					<view class="neiriong pd-20">
						<view class="ft1">{{ "服务费" }}</view>
						<view class="cardItem mt-20 pd-20"
							v-for="(item, index) in orderSettlementInfo.price_detail_list" :key="index">
							<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex" v-if="item.is_coupon === 0"><text class="ft-num mr-8 ft-24">{{
									item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
								<view class="flex" v-else><text class="ft icon_quan c-ff">券</text>
									<text class="ft-num c-red mr-8 ft-24">{{ item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
							</view>
							<view class="ft mt-24 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
						</view>
						<view class="ft1 mt-20">{{ "其他费用" }}</view>
						<view class="cardItem mt-20 pd-20"
							v-for="(item, index) in orderSettlementInfo.other_price_detail_list" :key="index">
							<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex" v-if="item.is_coupon === 0"><text class="ft-num mr-8 ft-24">{{
									item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
								<view class="flex" v-else><text class="ft icon_quan c-ff">券</text>
									<text class="ft-num c-red mr-8 ft-24">{{ item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
							</view>
							<view class="ft mt-24 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
						</view>
						<view class=" mt-20" v-if="orderSettlementInfo?.additional_price_detail_list?.length > 0">
							<view class="ft1">{{ "附加服务费" }}</view>
							<view class="cardItem mt-20 pd-20"
								v-for="(item, index) in orderSettlementInfo.additional_price_detail_list" :key="index">
								<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
									<view class="ft fw-800 c-33">{{ item.name }}</view>
									<view class="flex"><text class="ft-num mr-8 ft-24">{{ item.formula }}</text>
										<image class="wh-24" :class="{ down: item.isOpen != 1 }"
											src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
											@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
										</image>
									</view>
								</view>
								<view class="ft mt-20 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
							</view>
						</view>

						<view class="price flex mt-20">
							<view>
								<text class="ft c-red">{{ "共减￥" }}</text><text class="ft-num ft-24 c-red">{{
									orderSettlementInfo.total_reduce_price_exchange_show
								}}</text><text class="ft c-red mr-12">{{ "元" }}</text>
								<text class="ft">{{ "合计￥" }}</text><text class="ft-num">{{
									orderSettlementInfo.total_price_exchange_show }}</text>
								<text class="ft">{{ "元" }}</text>
							</view>

							<view class="ft ft-hen">
								<text class="ft c-99">{{ "原价" }}</text><text class="ft-num ft-24 c-99">{{
									orderSettlementInfo.total_old_price_exchange_show }}</text><text class="ft c-99">{{
										"元"
									}}</text>
							</view>
						</view>
						<view class="jieshi pd-20 c-99 ft mt-20">
							温馨提示：<br />
							1、支付项目服务费，即可下订单。<br />
							2、其它费用以及项目投资费在办理过程中陆续支付，支持线上或线下支付，非微信支付提供支付凭证后，客服人员进行后台核销。<br />
							3、活动立减需领优惠券后生效，有使用时间限制。<br />
							4、领券下订单后，待支付的费用优惠将持继有效。<br />
						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 2">
					<view class="neiriong">
						<view class="pCard pd-20">
							<view class="ft1">投资费用</view>
							<view class="ft mt-12">{{
								"投资费由移民所在国政府或第三方收取，投资人相关权益由被投资方双方签署的协议约束。"
							}}</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资类型 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.invest_type }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资标的 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.invest_bid }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资金额 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.invest_currency_symbol
											+ orderSettlementInfo.invest_exchange_price_show }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 换算人民币 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.invest_currency_symbol
											+ orderSettlementInfo.invest_exchange_price_show }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20" style="padding-right: 0;"> 投资是否可回收 </view>
									<view class="right ft fw-800 pd-20">{{ orderSettlementInfo.invest_recycle }}
									</view>
								</view>
							</view>
						</view>
						<view class="pCard pd-20">
							<view class="ft1">预计投资收益</view>
							<!-- <view class="ft mt-12">{{
	                "投资费由移民所在国政府或第三方收取，投资人相关权益由被投资方双方签署的协议约束。"
	              }}</view> -->
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 持有时间 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.income_time }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 可得总回报约 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.income_rate }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 预计收益</view>
									<view class="right ft fw-800 pd-20">
										{{
											orderSettlementInfo.income_currency_symbol +
											orderSettlementInfo.income_expect_show
										}}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 换算人民币 </view>
									<view class="right ft fw-800 pd-20">
										{{
											orderSettlementInfo.income_currency_symbol +
											orderSettlementInfo.income_expect_show
										}}
									</view>
								</view>
								<view class="flex line" style="align-items: stretch;height: unset;">
									<view class="left ft c-99 pd-20" style="height: auto;">备注</view>
									<view class="right ft fw-800 pd-20" style="height: unset;border-bottom: none;">
										{{ orderSettlementInfo.income_remark }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 3">
					<view class="neiriong">
						<view class="pCard pd-20">
							<view class="ft1">预计汇总</view>
							<view class="ft c-99 mt-12">{{
								"该项目用户预计需要承担的费用汇总"
							}}</view>
							<view style="width: 100%; text-align: right" class="ft c-99 mt-12">{{ "单位(人民币)" }}
							</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 服务费 </view>
									<view class="right ft flex-bwt pd-20" style="box-sizing: border-box;">
										<text class="ft fw-800">{{ orderSettlementInfo.price_symbol
											+ orderSettlementInfo.price_show }}</text>
										<text v-if="orderSettlementInfo.coupon_price_exchange_show">
											<text style="
	                          width: 32rpx;
	                          height: 32rpx;
	                          background: #ff0000;
	                          border-radius: 8rpx;
							  display: inline-block;
							  text-align: center;
	                        " class="quan c-ff mr-8">券</text>
											<text class="ft c-red">{{
												"-￥" + orderSettlementInfo.coupon_price_exchange_show
											}}</text></text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 办理其它费用 </view>
									<view class="right ft flex-bwt pd-20" style="box-sizing: border-box;">
										<text class="ft fw-800" v-if="orderSettlementInfo.other_price_exchange_show">{{
											orderSettlementInfo.price_symbol
											+ orderSettlementInfo.other_price_exchange_show }}</text>
										<text v-if="orderSettlementInfo.coupon_other_price_exchange_show">
											<text style="
	                          background: #ff0000;
	                          width: 32rpx;
	                          height: 32rpx;
	                          border-radius: 8rpx;
							  display: inline-block;
							  text-align: center;
	                        " class="quan c-ff mr-8">券</text>
											<text class="ft c-red">{{
												"-￥" + orderSettlementInfo.coupon_other_price_exchange_show
											}}</text></text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 附加服务费 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800"
											v-if="orderSettlementInfo.additional_price_exchange_show">{{
												"￥" + orderSettlementInfo.additional_price_exchange_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 投资费用 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.invest_exchange_price_show">{{
											"￥" + orderSettlementInfo.invest_exchange_price_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 合计 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800">
											{{ "￥" + orderSettlementInfo.total_invest_price_show }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="pCard pd-20">
							<view class="ft1">预计可回收收益汇总</view>
							<view class="ft c-99 mt-12">{{
								"该项目用户预计办理后可回收的收益"
							}}</view>
							<view style="width: 100%; text-align: right" class="ft c-99 mt-12">{{ "单位(人民币)" }}
							</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99 pd-20" style="padding: 20rpx 0 20rpx 10rpx ;"> 可回收投资费用
									</view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.recycle_exchange_price_show">
											{{ "￥" + orderSettlementInfo.recycle_exchange_price_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 预计投资收益 </view>
									<view class="right ft flex-bwt pd-20"><text class="ft fw-800"
											v-if="orderSettlementInfo.income_expect_show">
											{{ "￥" + orderSettlementInfo.income_expect_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 合计 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.total_recycle_price_show">{{
											"￥" + orderSettlementInfo.total_recycle_price_show + "人民币"
										}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view :style="{ height: (98 + 68) + 'rpx' }"></view>

		<view class="bottomBtn flex-center">
			<view class="btn flex-center ft c-dbf" @click="closeO">确定</view>
		</view>
	</up-popup>
	<up-popup :show="showCoupon" mode="bottom" round="14" @open="openCoupon">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeCoupon"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">优惠券明细</view>
			<view class="mt-20 ft fw-800">{{ "当前支付已选择优惠券" }}</view>
			<view class="list" v-if="orderSettlementInfo.coupon_list && orderSettlementInfo?.coupon_list?.length > 0">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view v-for="(item, index) in orderSettlementInfo.coupon_list" :key="item.id">
						<view class="flex mt-20" @click="checkCoupon(item, index)" v-if="item.is_check == 1">
							<view class="left">
								<text class="tip pd-8 c-ff  ft ft-20">{{ item.preferential_name }}</text>
								<view class="mt-10 jia">
									<view class="ft1 ft-num">{{ item.currency_symbol + item.reduce }}</view>
									<view class="ft" style="white-space: nowrap;"
										v-if="item.cate == 1 || item.cate == 2">
										{{ item.type_name }}
									</view>
									<view class="ft" style="white-space: nowrap;" v-else-if="item.cate == 3">
										{{ "服务费" + item.discount + '折券' }}
									</view>
								</view>
							</view>
							<view class="right flex-bwt pd-20">
								<view class="ml-20 mt-10">
									<view class="ft1 ft-24">{{ item.txt }}</view>
									<view class="ft mt-12 c-99">{{ item.start_time + ' ~ ' + item.end_time }}</view>
								</view>
								<image class="mr-10" style="width: 30rpx;height: 30rpx;"
									src="https://cdn.oss.bon-top.cn/static_bc/images/check.png"
									v-if="!unCheckCouponData.includes(item.id)"></image>
								<image class="mr-10" style="width: 30rpx;height: 30rpx;"
									src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png"
									v-if="unCheckCouponData.includes(item.id)"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click="sureCheckCoupon">确定</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showPay" mode="bottom" round="14" @open="openPay">
		<view class="offers">
			<image class="popup-close wh-36" @click="closePay"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">已选支付项目</view>
			<view class="pay-list mt-20">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="m pd-20">
						<view class="title">支付款项</view>
						<view class="comboItem mt-20 pd-20" v-for="(item, index) in payNodeList" :key="item.index">
							<view class="flex-bwt">
								<view class="flex" @click="checkPayNode(item, index)">
									<image class="mr-10" style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/reduce.png"></image>
									<view class="ft c-33 fw-800">{{ item.name }}</view>
								</view>
								<view class="flex">
									<text class="ft c-33 fw-800">{{ "￥" + item.price_show }}</text>
									<image v-if="item.isOpen == 1" @click="item.isOpen = item.isOpen == 1 ? 0 : 1"
										class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png">
									</image>
									<image v-else @click="item.isOpen = item.isOpen == 1 ? 0 : 1" class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
								</view>
							</view>
							<view class="ml-40 mt-10 ft c-99">
								{{ "付款节点:" + item.node + " | 付款时间:" + item.pay_time }}
							</view>
							<view v-if="item.isOpen == 1">
								<view class="line1 ml-40 mt-20"></view>
								<view class="flex-bwt mt-10 w-100" v-for="(v, k) in item.list" :key="k">
									<view class="ft ml-40 c-99">{{ v.name }}</view>
									<view class="flex">
										<view class="ft c-99">{{ "￥" + v.old_price_show + "优惠后 |" }}</view>
										<view class="ft c-33 fw-800">{{ " ￥" + v.new_price_show }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="m pd-20 mt-20"
						v-if="(orderSettlementInfo.share_reduce_price_exchange_show && delReduce == 0) || (orderSettlementInfo.integral_reduce_price_exchange_show && delIntegral == 0)">
						<view class="title">可减免项目</view>

						<view class="comboItem mt-20 pd-20"
							v-if="orderSettlementInfo.share_reduce_price_exchange_show && delReduce == 0">
							<view class="flex-bwt">
								<view class="flex" @click="delReduce = 1">
									<image class="mr-10" style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/reduce.png"></image>
									<view class="ft c-33 fw-800">分享减免</view>
								</view>
								<view class="flex">
									<text class="ft c-33 fw-800">{{
										"￥" + orderSettlementInfo.share_reduce_price_exchange_show
									}}</text>
									<image v-if="openReduceDes == 1" @click="openReduceDes = openReduceDes == 1 ? 0 : 1"
										class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png">
									</image>
									<image v-else @click="openReduceDes = openReduceDes == 1 ? 0 : 1" class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
								</view>
							</view>
							<view class="ml-40 mt-10 ft c-99" v-if="openReduceDes == 1">
								可用分享减免券{{ orderSettlementInfo?.share_reduce_list?.length }}张，已使用-￥{{
									orderSettlementInfo.share_reduce_price_exchange_show }}券
							</view>
						</view>

						<view class="comboItem mt-20 pd-20"
							v-if="orderSettlementInfo.integral_reduce_price_exchange_show && delIntegral == 0">
							<view class="flex-bwt">
								<view class="flex" @click="delIntegral = 1">
									<image class="mr-10" style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/reduce.png"></image>
									<view class="ft c-33 fw-800">积分减免</view>
								</view>
								<view class="flex">
									<text class="ft c-33 fw-800">{{
										"￥" + orderSettlementInfo.integral_reduce_price_exchange_show }}</text>
									<image v-if="openIntegralDes == 1"
										@click="openIntegralDes = openIntegralDes == 1 ? 0 : 1" class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png">
									</image>
									<image v-else @click="openIntegralDes = openIntegralDes == 1 ? 0 : 1"
										class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
								</view>
							</view>
							<view class="ml-40 mt-10  ft c-99" v-if="openIntegralDes == 1">
								可用积分{{ orderSettlementInfo.can_use_integral_show }}，已使用-{{ integral }}</view>
						</view>

					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click="sureCheckPay">确定</view>
			</view>
		</view>
	</up-popup>
	<!-- 合同 -->
	<!-- v-if="showContractPop" -->
	<view class="delete_box" ref="diaLogPop" v-if="showContractPop">
		<view class="delete">

			<view class="bg"></view>
			<view class="delete_model bd-r40">
				<view class="ft-32 c-33 fw-800 mt-30">{{ '温馨提示' }}</view>
				<view class="c-99 ft-28 text pd-30">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :show-scrollbar="true">
						<view class="office_box">


							<view class="office mt-20 pd-20 flex-bwt" v-for="item in orderSettlementInfo.contract_data"
								:key="item.id">
								<view class="flex">
									<image v-if="item.suffix === ' pdf'" class="w-66h-76"
										src="https://cdn.oss.bon-top.cn/static_bc/images/PDF.png">
									</image>
									<image v-else-if="item.suffix === 'xlsx' || item.suffix === 'xls'" class="w-66h-76"
										src="https://cdn.oss.bon-top.cn/static_bc/images/X.png"></image>
									<image v-else-if="item.suffix === 'docx' || item.suffix === 'doc'" class="w-66h-76"
										src="https://cdn.oss.bon-top.cn/static_bc/images/W.png"></image>
									<image class="w-66h-76" src="https://cdn.oss.bon-top.cn/static_bc/images/PDF.png"
										v-else>
									</image>
									<view class="ft ml-8">
										<view class="ft1 text_left">{{ item.origin_name }}</view>
										<view class="ft c-99 mt-10">{{ item.created_at + " | " + item.size_info }}
										</view>
									</view>
								</view>
								<!-- <view class="ft c-99" @click="seeOffice(item.url, item.suffix)">查看</view> -->
								<view class="ft c-99" @click="openContract(item)">查看</view>
							</view>
						</view>
					</scroll-view>
					<view class="bottom_box">
						<view class="mt-40 xiey">
							<text class="ft ft-22">我已同意合同条款 <text
									v-for="(item, index) in orderSettlementInfo.contract_data" :key="item.id"><text
										class="c-bbq">《{{ item.origin_name }}》</text> <text
										v-if="index < orderSettlementInfo.contract_data.length - 1">、</text>
								</text></text>
						</view>
					</view>


				</view>
				<view class="btn_model flex-eve">
					<view class="btn" @click="cancel">{{ '不同意' }}</view>
					<view class="btn sunbmit" @click="confim()">{{ '同意' }}</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 合同查看确认弹窗 -->
	<view class="delete_box_2" ref="diaLogPop" v-if="showContract">
		<view class="bg"></view>
		<view class="delete_model bd-r40">
			<view class="ft-32 c-33 fw-800 mt-30">{{ '提示' }}</view>
			<view class="c-99 ft-28 text pd-30">
				<view>是否查看文档</view>
				<view style="color: #1F18EE;"> 《{{ dataContract.origin_name }}》</view>
				<view>合同大小：{{ dataContract.size_info }} </view>

			</view>
			<view class="btn_model flex-eve">
				<view class="btns" @click="showContract = false">{{ '取消' }}</view>
				<view class="btns sunbmit" @click="seeOffice()">{{ '查看' }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from "vue";
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad
} from '@dcloudio/uni-app'

import navHead from '@/components/navHead.vue';
import comTimeOut from '@/components/comTimeOut.vue'

const headData = reactive({
	color: '#fff',
	title: '下单预览'
})
const goPage = (url) => {
	uni.navigateTo({
		url: url
	})
}

const scrollTop = ref(0)
const upper = () => {

}
const lower = () => {

}

const scroll = () => {

}

const formData = ref({}) //提交表单内容

const isCheck = ref(false);
const pay_node_id = ref([])
const pay_additional_id = ref([])
const checkNode = (item) => {
	if (item.is_additional == 0) {
		if (pay_node_id.value.includes(item.id) && item.is_default == 0) {
			pay_node_id.value = pay_node_id.value.filter((v) => {
				return v != item.id
			})
		} else {
			if (!pay_node_id.value.includes(item.id)) {
				pay_node_id.value.push(item.id)
			}
		}
	} else {
		if (pay_additional_id.value.includes(item.list[0].id) && item.is_default == 0) {
			pay_additional_id.value = pay_additional_id.value.filter((v) => {
				return v != item.list[0].id
			})
		} else {
			if (!pay_additional_id.value.includes(item.list[0].id)) {
				pay_additional_id.value.push(item.list[0].id)
			}
		}
	}
	orderSettlementData()
}

const goSource = (code) => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/linkView?code=" + code,
	});
}

const coupon_id = ref([])
const goCoupons = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/coupons",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				coupon_id.value = data.coupon_id
				isCheckCoupon.value = true
				orderSettlementData()
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', {
				coupon_list: orderSettlementInfo.value.coupon_list,
				expire_coupon_list: orderSettlementInfo.value.expire_coupon_list
			});
		}
	});
}


const integral = ref("")
const goDeduction = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/deduction",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				integral.value = data.integral
				orderSettlementData()
			}
		},
		success: (res) => {
			// 向子页面传递数据
			console.log('orderSettlementInfo', orderSettlementInfo.value)

			res.eventChannel.emit('toDetail', {
				integral: orderSettlementInfo.value.can_use_integral,
				can_use_integral_show: orderSettlementInfo.value.can_use_integral_show,
				integral_exchange_rule: orderSettlementInfo.value.integral_exchange_rule
			});
		}
	});
}

const remark = ref("")
const goNote = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/note",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				remark.value = data.remark
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', {
				remark: remark.value
			});
		}
	});
}

const reduce_id = ref("")
const goReduction = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/reduction",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				reduce_id.value = data.reduce_id
				isCheckReduce.value = true
				orderSettlementData()
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', {
				share_reduce_list: orderSettlementInfo.value.share_reduce_list
			});
		}
	});
}
const showContractPop = ref(false)
const cancel = () => {
	showContractPop.value = !showContractPop.value

}
const confim = () => {
	showContractPop.value = !showContractPop.value
	isCheck.value = !isCheck.value
	subOrder()
}
//提交订单
const subOrder = () => {
	// 如果当前与关联合同并且合同没有打钩
	if (!isCheck.value && orderSettlementInfo.value.contract_data.length > 0) return showContractPop.value = !
		showContractPop.value
	formData.value = {}
	formData.value.spec_id = spec_id.value
	formData.value.additional_id = additional_id.value
	formData.value.group_id = group_id.value
	formData.value.pay_node_id = pay_node_id.value
	formData.value.pay_additional_id = pay_additional_id.value
	formData.value.integral = integral.value
	if (isCheckCoupon.value == true) {
		formData.value.coupon_id = coupon_id.value
	}
	if (isCheckReduce.value == true) {
		formData.value.reduce_id = reduce_id.value
	}
	formData.value.remark = remark.value

	formData.value.is_sub = 1
	formData.value.is_group_buy = is_group_buy.value
	formData.value.share_user_id = share_user_id.value
	// 订阅消息
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			tmplIds: is_group_buy == 1 ? Subscriptions['pdd'] : defaults,
			success(res) {
				utils.subscribeMessage(res)
			},
			complete(res) {
				submit()
			}
		})
	} else {
		submit()

	}

}
const submit = () => {
	utils
		.request(
			api.orderSettlement, formData.value,
			"post"
		)
		.then((res) => {
			if (res.data.info.group_id > 0) {
				uni.redirectTo({
					url: "/subpackage/joinGroup/groupDetail?group_id=" + res.data.info.group_id +
						'&order_id=' + res.data.info.order_id,
				});
			} else if (res.data.info.is_pay > 0) {
				//跳转到已支付页面
				uni.redirectTo({
					url: "/subpackage/joinGroup/waitPay?id=" + res.data.info.order_id,
				});
			} else if (res.data.info.order_id) {
				//跳转到支付页面
				uni.redirectTo({
					url: "/subpackage/joinGroup/cashRegister?order_id=" + res.data.info.order_id,
				});
			}
		});
}

const showFuwu = ref(false);
const closeF = () => {
	showFuwu.value = false
}
const openF = () => {
	showFuwu.value = true;
}

const showOffers = ref(false);
const closeO = () => {
	showOffers.value = false
}
const openO = () => {
	showOffers.value = true;
}
const checkList = ref(
	[{
		id: 1,
		title: '办理花费'
	},
	{
		id: 2,
		title: '投资费用'
	},
	{
		id: 3,
		title: '预计汇总'
	}
	]
)
const tabSec = ref(1)
const selctCheck = (id) => {
	tabSec.value = id
}


const showCoupon = ref(false);
const closeCoupon = () => {
	unCheckCouponData.value = []
	showCoupon.value = false
}
const openCoupon = () => {
	showCoupon.value = true
}

const unCheckCouponData = ref([])
const checkCoupon = (item, index) => {
	if (unCheckCouponData.value.includes(item.id)) {
		unCheckCouponData.value = unCheckCouponData.value.filter((v) => {
			return v != item.id
		})
	} else {
		unCheckCouponData.value.push(item.id)
	}
}

const sureCheckCoupon = () => {
	orderSettlementInfo.value.coupon_list.forEach((item, index) => {
		if (unCheckCouponData.value.includes(item.id)) {
			orderSettlementInfo.value.coupon_list[index].is_check = 0
		}
	})
	closeCoupon()
}


const unCheckPayData = ref([])
const showPay = ref(false);
const closePay = () => {
	unCheckPayData.value = []
	delReduce.value = 0
	openReduceDes.value = 0
	delIntegral.value = 0
	openIntegralDes.value = 0

	orderSettlementData()
	showPay.value = false
}
const openPay = () => {
	showPay.value = true
}

const delReduce = ref(0)
const openReduceDes = ref(0)

const delIntegral = ref(0)
const openIntegralDes = ref(0)

const checkPayNode = (item, index) => {
	if (item.is_default == 1) {
		return
	}
	unCheckPayData.value.push(item)
	payNodeList.value.splice(index, 1)
}

const sureCheckPay = () => {
	if (delReduce.value == 1) {
		//去除分享减免
		isCheckReduce.value = true
		reduce_id.value = -1
	}
	if (delIntegral.value == 1) {
		//去除积分减免
		integral.value = 0
	}

	console.log(unCheckPayData.value, 123456789)

	if (unCheckPayData.value.length > 0) {
		unCheckPayData.value.forEach(item => {
			if (item.is_additional == 0) {
				pay_node_id.value = pay_node_id.value.filter((v) => {
					return v != item.id
				})
			} else {
				pay_additional_id.value = pay_additional_id.value.filter((v) => {
					return v != item.list[0].id
				})
			}
		})
	}


	closePay()
}




const spec_id = ref('')
const group_id = ref('')
const additional_id = ref([])
const is_group_buy = ref('')
const share_user_id = ref('')
const isSettings = ref(false)
// 订阅
let Subscriptions = reactive({
	vip: ['uEyoOBtC04GyAJreDcHNOWxXUqLnVhCi0iiy8JZFtkY',
		'nJfc7Omo7j13JVoSFeYRWNkRUpD1avigbHrUZh02ukc',], //会员等级变更通知/会员即将到期通知
	pdd: ['BLLewAu_rMSTqrBiW98zoZnQQ-fd9crrATRW1TBIIlQ'], //拼团优惠券发放通知
	teacher: ['A9rrkF9jh1aN08OsQK9u5KDbB0dh5tusqxtsf3l0K74'], //报告生成通知

})
let defaults = reactive(['5eBF4tWIVMgMAU6v3j7ur7z7RngxO-H-aoKzeNaIx6Q', 'iuyYMsz0Fw5bSnbvDwP4uGLa5R2kue47l1quLyG7spQ',
	'b19X2pCZJI1hJvPK34x2q8gasF2QT2UrZXlmbOAstpM'
]) //订单已完成通知 / 订单状态更新提醒 / 拼团状态通知

onLoad((options) => {
	if (options.spec_id) {
		spec_id.value = options.spec_id;
		group_id.value = options.group_id ? options.group_id : '';
		additional_id.value = options.additional_id ? options.additional_id.split(',') : [];
		share_user_id.value = options.share_user_id ? options.share_user_id : '';
		orderSettlementData(1)
	}
	getSettingFun(is_group_buy.value)


})
const getSettingFun = (type) => {
	// 订阅消息

	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {
				if (type == 1) { //拼团状态
					isSettings.value = Subscriptions['pdd'].some(f => res.subscriptionsSetting
						.itemSettings[f])

				} else {

					isSettings.value = defaults.some(f => res.subscriptionsSetting.itemSettings[f])
				}
			}
		}
	})
}
const changePdd = (val, type = 0) => {
	is_group_buy.value = val
	getSettingFun(is_group_buy.value)
	if (type == 1) {
		orderSettlementData()
	}
}
const orderSettlementInfo = ref({})
const uInfo = ref({})
const isCheckCoupon = ref(false)
const isCheckReduce = ref(false)
const payNodeList = ref([])
const orderSettlementData = (type = 0) => {
	const postData = {
		spec_id: spec_id.value,
		additional_id: additional_id.value,
		group_id: group_id.value,
		is_group_buy: is_group_buy.value,
		pay_node_id: pay_node_id.value,
		pay_additional_id: pay_additional_id.value,
		integral: integral.value,
	}
	if (isCheckCoupon.value == true) {
		postData.coupon_id = coupon_id.value
	}
	if (isCheckReduce.value == true) {
		postData.reduce_id = reduce_id.value
	}

	utils
		.request(
			api.orderSettlement, postData,
			"post"
		)
		.then((res) => {
			orderSettlementInfo.value = res.data.info;

			payNodeList.value = []
			orderSettlementInfo.value.node_list.forEach(item => {
				if (item.is_check == 1) {
					payNodeList.value.push(item)
				}
			})

			if (type == 1) {
				getQuan()
				uInfo.value = res.data.u_info
				if (res.data.info.group_data && group_id.value) {
					//初始化拼团状态
					is_group_buy.value = 1
					getSettingFun(is_group_buy.value)
					if (group_id.value) {
						//重新计算
						orderSettlementData()
					}
				}
			}
		});
}


//领取优惠券
const getQuan = () => {
	utils
		.request(
			api.receiveCoupon, {
			is_all: 1,
			product_id: orderSettlementInfo.value.product_data.id,
		},
			"post"
		)
		.then((res) => {
			if (res.data.get_num > 0) {
				uni.showToast({
					title: '已自动帮您领券',
					icon: 'none',
				});
				orderSettlementData()
			}
		});
}
const showContract = ref(false)
const dataContract = ref({})
const openContract = (data) => {
	dataContract.value = data
	showContract.value = !showContract.value
}
const seeOffice = async () => {
	showContract.value = !showContract.value

	try {

		// 下载文件
		const {
			tempFilePath,
			statusCode
		} = await uni.downloadFile({
			url: dataContract.value.url,
		});
		// 检查下载状态码
		if (statusCode === 200) {
			// 打开下载好的文件
			await uni.openDocument({
				filePath: tempFilePath,
				fileType: dataContract.value.suffix, // 根据实际文件类型修改
			});
		} else {
			// 下载失败，给出提示
			uni.showToast({
				title: '文件下载失败',
				icon: 'none',
			});
		}
	} catch (error) {
		// 处理异常，给出提示
		console.log('error', error)

		uni.showToast({
			title: '预览文件出错：' + error.errMsg,
			icon: 'none',
		});
	}
};

const openNodeIndexArr = ref([])
const openNode = (index) => {
	if (openNodeIndexArr.value.includes(index)) {
		openNodeIndexArr.value = openNodeIndexArr.value.filter((item) => {
			return item != index
		})
	} else {
		openNodeIndexArr.value.push(index)
	}
}
</script>

<style lang="scss" scoped>
.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 448rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.offers {
	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	width: 100vw;

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y-service {
		height: calc(100% - 128rpx + env(safe-area-inset-bottom));
	}

	.list {
		height: calc(70vh - 128rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.left {
			width: 182rpx;
			height: 144rpx;
			background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;

			.tip {
				//  width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 20rpx 8rpx 8rpx 8rpx;
			}

			.jia {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.right {
			width: 508rpx;
			height: 144rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

	.pay-list {
		height: calc(70vh - 84rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.m {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;

			.comboItem {
				background: #F8F8F8;
				border-radius: 20rpx;
			}
		}
	}

	.card_6 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.card {
			width: 630rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #F1F1F1;
			overflow: hidden;

			.left {
				height: auto;
				width: 108rpx;
				background: #F1F1F1;
				padding-top: 20rpx;
				padding-left: 20rpx;
			}

			.right {
				width: 522rpx;
				border-bottom: 2rpx solid #F1F1F1;
			}

			.flex:last-child {
				.right {
					border-bottom: none;
				}
			}
		}
	}

	.card_7 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.popuItem {
		width: 152rpx;
		height: 72rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
	}

	.content {
		width: 100%;
		height: calc(70vh - 240rpx + env(safe-area-inset-bottom));
		// height: 756rpx;

		//  border: #1746ff solid 2rpx;
		.scroll-Y {
			// height: 756rpx;
			height: 100%;
		}

		.neiriong {
			width: 670rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			//height: 1200rpx;
			.cardItem {
				width: 630rpx;
				//height: 148rpx;
				background: #f8f8f8;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.border {
					border-bottom: 2rpx solid #f1f1f1;
					padding-bottom: 20rpx;
				}

				.down {
					transform: rotate(180deg);
				}

				.icon_quan {
					width: 32rpx;
					height: 32rpx;
					background: #ff0000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
				}
			}

			.price {
				justify-content: flex-end;
				flex-direction: column;
				align-items: flex-end;
			}

			.jieshi {
				width: 630rpx;
				height: 264rpx;
				background: #fff3ec;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.pCard {
				width: 670rpx;
				// height: 542rpx;
				background: #ffffff;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				// border: 2rpx solid red;
				.samllCard {
					width: 630rpx;
					//height: 372rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid #f1f1f1;
					overflow: hidden;

					.line {
						height: 74rpx;

						.left {
							width: 200rpx;
							height: 76rpx;
							background: #f1f1f1;
						}

						.right {
							width: 460rpx;
							height: 74rpx;
							border-bottom: #F1F1F1 solid 2rpx;
						}
					}
				}
			}
		}
	}



}

.opt {
	position: fixed;
	bottom: 0;
	width: 100%;
	// height: 240rpx;
	// border: #ff0000 solid 2rpx;
	background: #F8F8F8;

	.group-box {
		width: 750rpx;
		background: linear-gradient(92deg, #DBF046 0%, #BFFFBB 100%);
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.time {
			background: #9C0000;
			border-radius: 8rpx;
			padding: 2rpx 6rpx;
			font-weight: 800;
			font-size: 20rpx;
			color: #FFFFFF;
		}

		.time-i {
			margin-left: 2rpx;
			margin-right: 2rpx;
			font-weight: 800;
			font-size: 24rpx;
			color: #333333;
		}

		.ptuan {
			.change {
				width: 198rpx;
				height: 50rpx;
				background: #ECFFDE;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
			}
		}
	}

	.submit {
		width: 750rpx;
		// height: 98rpx;
		background: #F8F8F8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

		.kind {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 78rpx;
			padding-right: 20rpx;
			border-right: 2rpx solid #F1F1F1;
			flex-shrink: 0;

			.kind-box {
				position: relative;

				.num {
					position: absolute;
					top: -16rpx;
					right: -16rpx;
					width: 32rpx;
					height: 32rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					background: #FF0000;
					border-radius: 50%;
				}
			}
		}

		.minxi {
			width: 170rpx;
			height: 50rpx;
			background: #F1F1F1;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
		}

		.tijiao {
			width: 192rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
}

.line {
	width: 610rpx;
	height: 5rpx;
	border-bottom: 2rpx solid #f1f1f1;
}

.line1 {
	width: 570rpx;
	height: 0rpx;
	border-bottom: 2rpx solid #f1f1f1;
}

.goods {
	width: 690rpx;
	// height: 318rpx;
	background: #f8f8f8;
	border-radius: 40rpx;

	.img {
		width: 142rpx;
		height: 174rpx;
		border-radius: 40rpx;
	}

	.more {
		width: 650rpx;
		height: 58rpx;
		background: #f1f1f1;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}
}

.rate {
	width: 690rpx;
	background: #f8f8f8;
	border-radius: 40rpx;

	.more {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.amount {
	width: 690rpx;
	// height: 538rpx;
	background: #f8f8f8;
	border-radius: 40rpx;

	.card {
		width: 650rpx;
		// height: 320rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.line {
			width: 610rpx;
			height: 5rpx;
			border-bottom: 2rpx solid #f1f1f1;
		}

		.money {
			text-align: right;
			width: 100%;
		}
	}

	.more {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.contract {
	width: 690rpx;
	// height: 666rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;



	.office {
		width: 650rpx;
		height: 116rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.img {
			width: 66rpx;
			height: 76rpx;
		}
	}

	.xiey {
		display: flex;
		justify-content: flex-start;
	}
}

.combo {
	width: 690rpx;
	//height: 986rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.comboItem {
		width: 650rpx;
		//height: 236rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.fee {
	width: 690rpx;
	//height: 454rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.center {
		width: 650rpx;
		// height: 354rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.you {
			width: 208rpx;
			height: 50rpx;
			background: #fff3ec;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			color: #ff0000;
		}

		.img {
			width: 20rpx;
			height: 34rpx;
		}
	}
}

.note {
	width: 690rpx;
	//height: 380rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	word-break: break-word;

	.center {
		width: 650rpx;
		//height: 278rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.btn {
			width: 260rpx;
			height: 58rpx;
			background: #DBF046;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
		}
	}
}

.delete_box {
	width: 100%;
	height: 100vh;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	// flex-direction: column;
	justify-content: center;
	align-items: center;
	// background: red;
	z-index: 9999;
}

.delete {

	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #000;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		// overflow: hidden;
		border: 1rpx solid transparent;
		position: relative;
		background-color: #fff;
		text-align: center;
		width: 620rpx;
		height: 780rpx;
		z-index: 3;

		.bottom_box {}

		.text {
			min-height: 140rpx;
		}

		.office_box {
			height: 400rpx;
			overflow-y: scroll;

		}

		.btn_model {
			margin-bottom: 30rpx;

			.btn {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
			}
		}
	}

}

.delete_box_2 {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;


	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #000;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		position: absolute;
		background-color: #fff;
		text-align: center;
		width: 518rpx;
		// height: 386rpx;
		top: calc(50% - (386rpx / 2));
		left: calc(50% - (518rpx / 2));

		.text {
			// padding: 20rpx;
			min-height: 140rpx;
		}

		.btn_model {
			margin-bottom: 30rpx;

			.btns {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
			}
		}
	}

}
</style>